<template>
  <div class="file-preview">
    <el-icon><Document /></el-icon>
    <span class="file-name">{{ file.name }}</span>
    <a :href="url" target="_blank" download>下载</a>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import { Document } from '@element-plus/icons-vue';
import type { UploadUserFile } from 'element-plus';

const props = defineProps<{ file: UploadUserFile }>();
const url = computed(() => props.file.url || URL.createObjectURL(props.file.raw!));
</script>

<style scoped>
.file-preview {
  display: flex;
  flex-direction: column;
  font-size: 14px;
}
.file-name {
  margin: 4px 0;
}
</style>
